<?php ?>
<!DOCTYPE html>
<html>
   <head>
      <title>New Page</title>
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
      <script type='text/javascript'>
      
         var domtree;
         
         function add_element(el, depth)
         {
            var margin_px = depth * 10;
            var tree_el = $("<div class='domtree-el'></div>");
            tree_el.css("margin-left", margin_px + "px");
            tree_el.text($(el).prop("tagName"));
            $(domtree).append(tree_el);
         }
         
         function set_dom_nav()
         {
            // Clear the DOM tree
            domtree = $(".dom-nav").html("");
            
            var src_node = $(".working-page");
            var node = src_node.children().first();
            
            node = $(".working-page").contents().find("html");
            
            var depth = 0;
            
            if (0 == node.length)
            {
               return;
            }
            
            // Loop through DOM nodes until we reach the source 
            // again
            while(node.length != 0) // && node != src_node)
            {
               add_element(node, depth);
               
               if (node.children().length)
               {
                  node = node.children().first();
                  depth++;
               }
               else if (node.next().length)
               {
                  node = node.next();
               }
               else
               {
                  while(true)
                  {
                     node = node.parent();
                     depth--;
                     
                     if (node.next().length)
                     {
                        node = node.next();
                        break;
                     }
                     else if (!node.length)
                     {
                        break;
                     }
                     
                  }
               }
               
            }
         }
         
         var selected_node = null;
      
         function highlight_node(node)
         {
            // node.realborder = node.css('border');
            // node.realmargin = node.css('margin');
            
            // var newmargin = parseInt(node.realmargin) - 3;
            
            // node.css('border', "3px solid yellow");
            // node.css('margin', newmargin + 'px');
            
            node.css('outline', "3px solid #FFE000");
         }
         
         function unhighlight_node(node)
         {
            // node.css('border', node.realborder);
            // node.css('margin', node.realmargin);
            
            node.css('outline', "none");
         }
         
         function set_selected(node)
         {
            if (null != selected_node)
            {
               unhighlight_node(selected_node);
            }
            
            selected_node = node;
            
            if (null != selected_node)
            {
               highlight_node(selected_node);
            }
         }
         
         function dom_set_selected(node)
         {
            if (0 == $(node).size())
            {
               return;
            }
            
            set_selected(node);
         }
         
         function dom_up(node)
         {
            if ($(selected_node).is('body'))
            {
               return;
            }
            
            dom_set_selected($(node).parent());
         }
         
         function dom_prev(node)
         {
            if ($(selected_node).is('body'))
            {
               return;
            }
            
            dom_set_selected($(node).prev());
         }
         
         function dom_next(node)
         {
            if ($(selected_node).is('body'))
            {
               return;
            }
            
            dom_set_selected($(node).next());
         }
         
         function dom_down(node)
         {
            dom_set_selected($(node).children().first());
         }
         
         function dom_keypress(key)
         {
            // Left
            if (37 == key.keyCode)
            {
               dom_up(selected_node);
            }
            
            // Up
            else if (38 == key.keyCode)
            {
               dom_prev(selected_node);
            }
            
            // Right
            else if (39 == key.keyCode)
            {
               dom_down(selected_node);
            }
            
            // Down
            else if (40 == key.keyCode)
            {
               dom_next(selected_node);
            }
         }
         
         $(function()
         {
            set_selected($('body'));
            
            $(document).keydown(dom_keypress);
         });
         
      </script>
      <style type='text/css'>
      
         html,
         body
         {
            margin: 0;
            height: 100%;
            width: 100%;
         }
         
         .ref
         {
            width: 25%;
         }
         
         .working-page
         {
            border: none;
         }
         
         .ref,
         .working-page
         {
            float: left;
            height: 100%;
         }
         
         .dom-nav,
         .code-src
         {
            margin: 0;
            border: none;
            padding: 0;
            height: 50%;
            width: 100%;
         }
         
         .ref
         {
            background-color: green;
         }
         .working-page
         {
            background-color: blue;
         }
         .dom-nav
         {
            background-color: pink;
         }
         .code-src
         {
            background-color: orange;
         }
         
      </style>
   </head>
   <body>
      <div class='ref'>
         <ul class='dom-nav'></ul>
         <textarea class='code-src'></textarea>
      </div>
      <iframe class='working-page' src='working-doc.php' height='100%' width='75%'></iframe>
   </body>
</html>